<template>
  <view class="banner">
    <swiper
      :indicator-color="swiperConfig.indicatorColor"
      :indicator-active-color="swiperConfig.indicatorActiveColor"
      :indicator-dots="swiperConfig.indicatorDots"
      :autoplay="swiperConfig.autoplay"
      :circular="swiperConfig.circular"
      :interval="swiperConfig.interval"
      :duration="swiperConfig.duration"
    >
      <swiper-item v-for="(item, index) in list" :key="index">
        <image
          :src="item"
        />
      </swiper-item>
    </swiper>
  </view>
</template>
<script setup lang="ts">
import { ref } from "vue";

const swiperConfig = {
  indicatorColor: "rgba(255, 255, 255, .3)",
  indicatorActiveColor: "#df9653",
  indicatorDots: true,
  autoplay: true,
  circular: true,
  interval: 3000,
  duration: 300,
};

const list = ref([
  "https://img0.baidu.com/it/u=1403188,3415382502&fm=253&fmt=auto&app=120&f=JPEG?w=1421&h=800",
  "https://img2.baidu.com/it/u=1171978082,532414612&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
  "https://img2.baidu.com/it/u=583339057,376205746&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
]);
</script>
<style lang="scss" scoped>
.banner {
  width: 100vw;
  overflow: hidden;
  padding: 20rpx 30rpx;
  // border-radius: 28rpx;
  overflow: hidden;
  // background-color: #fff;
  swiper {
    width: 100%;
    height: 350rpx;
    border-radius: 28rpx;
    overflow: hidden;
    swiper-item {
      width: 100%;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>
